<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: springgreen;
            position: absolute;
            top: 100px;
            left: 100px;

            opacity: 0;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const box = document.querySelector("div")
        box.onclick = function () {
            /* 对盒子透明度的一个移动 
                我们的透明度就是 0 1
                如果我们想要看到移动的过程,那么我们需要利用小数
                    1 => 放大100倍
                        那么我们在缩小的 99 98 97 96 95 94
                        那我们在赋值的是 0.99 0.98 0.97 0.96 0.95 
            */
            move(this,'opacity',1)
        }

        function move(ele, type, target) {
            /* 
                相当于我们的透明度是从0 ~ 100之间的移动
            */
            if(type == 'opacity'){
                target *= 100;
            }
            let timer = setInterval(() => {
                //获取当前的坐标位置
                let current
                if(type == 'opacity'){
                    //表示移动的是透明度
                    current = window.getComputedStyle(ele)[type] * 100;
                }else{
                    current = parseInt(window.getComputedStyle(ele)[type])
                }
                /* 
                    移动最后一次的距离是0.9px
                    而浏览器能够识别的最小单位是1px
                    所以我们浏览器忽略他了
                */
                let step = (target - current) / 10
                /* 
                    如果是一个大于0的数,表示正向移动,那么其中的小数就向上取整
                    如果是一个小于0的数,表示反向移动,那么其中的小数就向下取整
                */
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                if (current == target) {
                    /* 清除定时器 */
                    clearInterval(timer)
                    timer = null;
                } else {
                    /* 
                        这一句话才是盒子的真正的移动
                        如果是一个opacity,那么不带单位移动,其他的带单位移动
                    */
                    if(type === 'opacity'){
                        ele.style[type] = (current + step) / 100;
                    }else{
                        ele.style[type] = current + step + "px";

                    }
                }
            }, 16);
        }
    </script>
</body>

</html>